<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="所属部门" prop="s_departments">
        <el-select
          v-model="queryParams.s_departments"
          placeholder="请选择所属部门"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in s_departmentsOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="患者名称" prop="s_name">
        <el-input
          v-model="queryParams.s_name"
          placeholder="请输入患者名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="挂号类型" prop="s_registration">
        <el-select
          v-model="queryParams.s_registration"
          placeholder="可用状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in s_registrationOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="挂号时段" prop="s_registrationTime">
        <el-select
          v-model="queryParams.s_registrationTime"
          placeholder="挂号时段"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in s_registrationTimeOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="挂号状态" prop="s_registeredState">
        <el-select
          v-model="queryParams.s_registeredState"
          placeholder="挂号状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in s_registeredStateOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictLabel"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="挂号时间" prop="s_registrationTimes">
        <el-date-picker v-model="queryParams.s_registrationTimes" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        :style="{width: '100%'}" clearable></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="roleList"
      border
      style="width: 100%">
      <el-table-column
        prop="s_name"
        label="患者姓名"
        >
      </el-table-column>
      <el-table-column
        prop="s_departments"
        label="挂号科室"
        >
      </el-table-column>
      <el-table-column
        prop="s_doctor"
        label="接诊医生">
      </el-table-column>
      <el-table-column
        prop="s_money"
        label="挂号费用"
        >
      </el-table-column>
      <el-table-column
        prop="s_ids"
        label="流水编号"
        >
      </el-table-column>
      <el-table-column
        prop="s_registeredState"
        label="状态"
        >
      </el-table-column>
      <el-table-column
        prop="s_registrationTimes"
        label="就诊日期"
        >
      </el-table-column>
      <el-table-column
        prop="s_registration"
        label="挂号类型"
        >
      </el-table-column>
      <el-table-column
        prop="s_registrationTime"
        label="挂号时段"
        >
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">

            <el-button
              size="mini"
              style="color: rgba(251,255,249,0.95)"
              type="success"
              icon="el-icon-check"
              v-if="scope.row.s_registeredState != '就诊完成' && scope.row.s_registeredState != '已退费'"
              @click="handleUpdate(scope.row)"
            >收费</el-button>
            <el-button
              size="mini"
              style="color: rgba(251,255,249,0.95)"
              type="danger"
              icon="el-icon-close"
              v-if="scope.row.s_registeredState != '就诊完成' && scope.row.s_registeredState != '已退费'"
              @click="handleUpdated(scope.row)"
            >退费</el-button>
        </template>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { listRole, getPost, getRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/visits/lists";

export default {
  name: "Role",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
        //挂号状态数据字典
        s_registeredStateOptions: [],
      // 挂号类型数据字典
        s_registrationOptions: [],
        //挂号时段数据字典
        s_registrationTimeOptions: [],
        //部门数据字典
        s_departmentsOptions: [],

      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
          s_ids: undefined,
          s_name: undefined,
          s_departments: undefined,
          s_registrationTimes: undefined,
          s_registrationTime: undefined,
          s_registration: undefined,
          s_registeredState: undefined,
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
          s_name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();

      this.getDicts("sys_time_status").then(response => {
          this.s_registrationTimeOptions = response.data;
      });
      this.getDicts("sys_registeredState_status").then(response => {
          this.s_registeredStateOptions = response.data;
      });
    this.getDicts("sys_registration_type").then(response => {
      this.s_registrationOptions = response.data;
    });
      this.getDicts("sys_department_status").then(response => {
          this.s_departmentsOptions = response.data;
      });
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.roleList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
      // 表单重置
      reset() {
          this.form = {
              s_ids: undefined,
              s_name: undefined,
              s_registrationTimes: undefined,
              s_registrationTime: undefined,
              s_registration: undefined,
              s_registeredState: undefined,
              s_departments: undefined
          };
          this.resetForm("form");
      },
      /** 根据角色ID收费状态 */
      handleUpdate(row) {
          this.reset();
          getPost(row.s_ids).then(response => {
              this.s_registeredState = response.rows;
              this.open = true;
          });
      },
      /** 根据角色ID退费状态 */
      handleUpdated(row) {
          this.reset();
          getRole(row.s_ids).then(response => {
              this.s_registeredState = response.rows;
              this.open = true;
          });
      },

    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      this.menuExpand = false,
      this.menuNodeAll = false,
      this.deptExpand = true,
      this.deptNodeAll = false,
      this.form = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: "0",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
